<template>
    <!--出价记录-->
    <div class="record-list J_Content" id="J_RecordList" 
         >
        <table class="pm-record-list" width="100%">
            <colgroup>
                <col class="record-icon-col">
                <col class="nickname-col">
                <col class="price-col">
                <col class="time-col">
            </colgroup>
            <thead>
            <tr class="head">
                <th class="record-icon" >状态</th>
                <th class="nickname">竞拍人</th>
                <th class="price">价格</th>
                <th class="time">时间</th>
            </tr>
            </thead>
            <tbody>


            <tr class="leader">
                <td class="record-icon"><s></s></td>
                <td class="nickname">L5844</td>
                <td class="price"><em class="fn-rmb">¥</em>301


                </td>
                <td class="time">2019-11-02 20:41:54</td>
            </tr>


            <tr class="out ">
                <td class="record-icon"><s></s></td>
                <td class="nickname">D7043</td>
                <td class="price"><em class="fn-rmb">¥</em>201


                </td>
                <td class="time">2019-11-02 20:00:29</td>
            </tr>


            <tr class="out ">
                <td class="record-icon"><s></s></td>
                <td class="nickname">L5844</td>
                <td class="price"><em class="fn-rmb">¥</em>101


                </td>
                <td class="time">2019-11-02 19:46:54</td>
            </tr>


            <tr class="out ">
                <td class="record-icon"><s></s></td>
                <td class="nickname">D7043</td>
                <td class="price"><em class="fn-rmb">¥</em>1


                </td>
                <td class="time">2019-11-02 19:29:53</td>
            </tr>


            </tbody>
            <tfoot>

            <tr class="toolbar skin-gray">
                <td class="page-nav-cell" colspan="7">
                    <el-pagination
                            small
                            :hide-on-single-page="false"
                            page-size="5"
                            layout="prev, pager, next"
                            :total="15">
                    </el-pagination>
                </td>
            </tr>

            </tfoot>
        </table>
    </div>
</template>

<script>
    export default {
        name: "PaiDetail_RecordList"
    }
</script>

<style scoped lang="less">
    .record-list{
        padding: 0 20px 20px;

        .pm-record-list {
            margin-top: 20px;

            .record-icon-col {
                width: 20%;
            }

            .nickname-col {
                width: 20%;
            }

            .price-col {
                width: 20%;
            }

            .time-col {
                width: 25%;
            }

            .record-icon {
                padding-left: 20px;
            }

            s{
                display: inline-block;
                width: 28px;
                height: 16px;
                background: url(//img.alicdn.com/tps/i2/TB1sIuvGXXXXXaKXVXXcUqb4XXX-72-279.png) 999px 999px no-repeat transparent;
            }

            .leader {
                td {
                    color: #7f0019;
                    font-weight: 700;
                }
                s{
                    background-position: 0 -22px;
                }
            }
            .out {
                s{
                    background-position: 0 -43px;
                }
            }

            th {
                background-color: #f6f6f6;
                padding: 10px 5px 10px 0;
            }

            td {
                text-align: center;
                padding: 15px 5px 15px 0;
                color: #848484;
                border-bottom: 1px solid #e9e9e9;

                }

            .fn-rmb {
                font-family: arial;
                font-style: normal;
                padding-right: 4px;
            }
        }
    }
</style>